<template>
  <div>

    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item class="el-items" index="1">ZXS</el-menu-item>
      <el-menu-item class="el-items" index="2">自习室</el-menu-item>
      <el-menu-item class="el-items" index="3">问答</el-menu-item>
      <el-menu-item class="el-items" index="4">分享</el-menu-item>
      <el-menu-item class="el-items" index="5">视频</el-menu-item>
      <el-menu-item class="el-items" index="6">个人空间</el-menu-item>
      <el-menu-item >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-menu-item>
      <el-menu-item >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-menu-item>
      <el-menu-item >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-menu-item>
      <el-submenu index="7" class="el-items">
        <template slot="title">
          <el-avatar :src="imgUrl"></el-avatar>
        </template>
        <el-menu-item index="7-1">退出</el-menu-item>
        <el-menu-item index="7-2">个人空间</el-menu-item>
      </el-submenu>

    </el-menu>

    <hr>
    <ChatRoom></ChatRoom>
    <router-view/>
  </div>
</template>

<script>
  let url = 'http://localhost:8888/';
    import ChatRoom from "../ChatRoomTest/ChatRoom";
    export default {
      name: "fmain",
      data() {
        return {
          // imgUrl:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          activeIndex: '1',
          _beforeUnload_time:0,
          _gap_time:'',
          timer:{},

        };
      },
      components: {ChatRoom},
      methods:{
        handleSelect(key, keyPath) {
          // console.log(key, keyPath);
          if(key===null)return;
          if(key==='1'||key==='2'){
            this.goToHomePage()
          }else if(key==='3'){
            this.goToQuestion()
          }else if(key==='4'){
            this.goToShare()
          }else if(key==='5'){
            this.goToVideo()
          }else if(key==='6'){
            this.goToOneRoom()
          }else{
            if(key==='7-1'){
              this.logOut();

            }else if(key==='7-2'){
              this.$router.push({name: "fRoom",params:{a:123123}});
            }
          }
        },
        logOut(){
          clearInterval(this.timer);
          sessionStorage.clear();
          localStorage.clear();
          this.$store.commit('updateUser',{});
          this.$router.push({name: "flogin",params:{a:123123}});

        },
        goToHomePage(){
          this.$router.push({name: "fHome",params:{a:123123}});
        },
        goToQuestion(){
          this.$router.push({name: "fquestion",params:{a:123123}});
        },
        goToShare(){
          this.$router.push({name: "fshare",params:{a:123123}});
        },
        goToVideo(){
          this.$router.push({name: "fVideo",params:{a:123123}});
        },
        goToOneRoom(){
          this.$router.push({name: "fRoom",params:{a:123123}});
        },
        beforeunloadHandler(){
          this._beforeUnload_time=new Date().getTime();
        },
        unloadHandler(e){
          this._gap_time=new Date().getTime()-this._beforeUnload_time;
          // debugger
          //判断是窗口关闭还是刷新
          if(this._gap_time<=5){
            this.logOut()
          }else{
            console.log("刷新")
          }
        },
      },
      mounted() {
        this.$router.push({name: "fHome", params: {a: 123123}});
        this.timer = setInterval(()=>{
          this.$http
            .get(url + "user/updateTime", {params: {id: this.$store.state.user.id}})
            .then(result => {
              console.log("加10秒")
            }, function () {

            });
        },60000)
        window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
        window.addEventListener('unload', e => this.unloadHandler(e))
      },
      destroyed() {
        window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
        window.removeEventListener('unload', e => this.unloadHandler(e))
      },
      computed:{
        imgUrl(){
          return 'http://localhost:8888/user/getUserLogo?path=' + this.$store.state.user.avatar;
        }
      }
    }
</script>

<style scoped>
  .el-items{
    width: 150px;
  }

  li{
    display: block;
  }
</style>
